﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<!-- demo root element -->
<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/Report/StoreInventory"><i class="fa fa-dashboard"></i> 库存报表</a></li>
            </ol>
        </div>
        <div class="box-body">

            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                <div class="col-xs-3 col-sm-2">
                    <product-selector v-model="table.args.ProductCodeIds" placeholder="商品" ref="producttable"></product-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <store-selector v-model="table.args.StoreId" placeholder="门店"></store-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <brand-selector v-model="table.args.brandId" placeholder="品牌" ref="brandtable"></brand-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <category-selector v-model="table.args.categoryId" placeholder="品类"></category-selector>
                </div>

                <div class="form-group col-sm-2 col-xs-3" style="padding-right:0px;">
                    <div class="input-group">
                        <span class="input-group-addon">库存数量</span>
                        <el-select name="mark" v-model="table.args.mark">
                            <el-option value=">">大于</el-option>
                            <el-option value=">=">大于等于</el-option>
                            <el-option value="<">小于</el-option>
                            <el-option value="<=">小于等于</el-option>
                        </el-select>
                    </div>
                </div>
                <div class="col-xs-3 col-sm-2" style="padding-left:0px;">
                    @*<el-input v-model="table.args.storeInventoryQuantity" placeholder="" debounce="500"></el-input>*@
                    <el-input-number v-model="table.args.storeInventoryQuantity" v-bind:precision="0" v-bind:min="0" v-bind:max="999999"></el-input-number>
                </div>
            </div>
            <div class="row" style="margin-bottom:10px;" slot="customSearch">
                <div class="col-xs-3 col-sm-2">
                    <supplier-selector v-model="table.args.supplierId" placeholder="供应商" ref="suppliertable"></supplier-selector>
                </div>
                <div class="col-xs-3 col-sm-2">
                    <el-checkbox v-model="showSncode">显示串码</el-checkbox>
                </div>
            </div>


            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <el-button type="primary" class="btn btn-flat" v-on:click="loadData">查 询</el-button>
                        <el-button class="btn btn-flat" v-on:click="clearQuery">清除条件</el-button>
                        <el-button type="warning" class="btn btn-flat" v-on:click="exportExecl">导 出</el-button>


                    </span>
                </el-col>
            </el-row>

            <el-row>
                <el-col v-bind:span="24">
                    <el-table class="form-group" ref="$table" v-bind:data="table.rows" border style="width: 100%" show-summary v-bind:height="table.height">

                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="StoreName" label="门店" width="180"></el-table-column>
                        <el-table-column prop="CategoryName" label="类别" width="200"></el-table-column>
                        <el-table-column prop="BrandName" label="品牌" width="100"></el-table-column>
                        <el-table-column prop="ProductCode" label="商品编码" width="120"></el-table-column>
                        <el-table-column prop="ProductName" label="商品名称" width="260"></el-table-column>
                        <el-table-column prop="SupplierName" label="供应商" width="200"></el-table-column>
                        <el-table-column prop="Quantity" label="库存数" width="90"></el-table-column>
                        <el-table-column prop="OccupyQuantity" label="锁定数" width="100"></el-table-column>
                        <el-table-column prop="UsableQuantity" label="可用数" width="100"></el-table-column>
                        <el-table-column prop="SalePrice" label="售价金额" width="100"></el-table-column>
                        <el-table-column prop="SNCode" label="串码" v-if="showSncode" width="200"></el-table-column>

                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper"
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination>
                </el-col>
            </el-row>


        </div>
        <!-- /.box-body -->
    </div>
    <div class="clearfix"></div>

</div>

@section scripts{
    <script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/store-selector/store-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/product-selector/product-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/supplier-selector/supplier-selector.js" type="text/javascript"></script>
    <script>

        var demo = new Vue({
            components: {

            },
            el: '#app',
            data: {

                table: {
                    height: 450,
                    rows: [],
                    args: { ProductCodeIds: '',  StoreId: '', brandId: '', categoryId: '', order: '', mark: '', storeInventoryQuantity: 0,supplierId:'',toExcel:false },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize },

                },
                checkBrandIds: [],
                showSncode:false,

            },
            methods: {
                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData();
                },
                loadData: function () {

                    var _self = this;
                    _self.table.page.pageIndex = 1;
                    var url = "/StoreInventory/LoadData";
                    var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, data, function (result) {
                        if (result.success) {
                            _self.table.rows = result.data;
                            _self.table.page.total = result.total;
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                },
                exportExecl: function () {
                    var _self = this;
                    _self.table.args.toExcel = true;
                    var data = Object.assign({}, _self.table.page, _self.table.args);

                    var str = '';
                    for (var key in data) {
                        if (!data[key] == '') {//判断为空就不传
                            str = str + "&" + key + "=" + data[key];
                        }

                    }
                    window.location.href = "/StoreInventory/LoadData?" + str;

                    ;
                },

                clearQuery: function () {
                    if (this.table.args.brandId != '') {
                        this.$refs.brandtable.onClear();
                    }
                    if (this.table.args.ProductCodeIds != '') {
                        this.$refs.producttable.onClear();
                    }
                    if (this.table.args.supplierId != '') {
                        this.$refs.suppliertable.onClear();
                    }

                    this.table.args = { ProductCodeIds: '', StoreId: '', brandId: '', categoryId: '', order: '', mark: '', storeInventoryQuantity: 0, supplierId: '', toExcel: false };
                    this.showSncode = false;
                },

                getSummaries(param) {
                                const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
            if (index === 1) {
            sums[index] = '合计';
        return;
        }

        if (index === 10 || index ===11|| index ===12|| index ===13) {
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return '';
                }
            }, 0);
            sums[index] ;
        } else {
            sums[index] = '';
        }
        }



        });
        return sums;
        },

        },
        created: function () {
            setListPage(this.table, 306);
        }
        });
    </script>
}



